<template>
	<!-- 村庄介绍弹框 -->
	<div v-if="showVillageDetail" class="showVillageDetail" :style="{ left: curVillage.locationX + '%', bottom: curVillage.locationY + '%' }">
		<div class="title">{{ curVillage.name }}</div>
		<div class="content">
			<div class="row-content">
				<div class="icon" :class="`icon1`"></div>
				<div class="label">布局面积</div>
				<div class="value">{{ curVillage.acreage }}亩</div>
			</div>
			<div class="row-content">
				<div class="icon" :class="`icon2`"></div>
				<div class="label">产量</div>
				<div class="value">{{ curVillage.count }}吨</div>
			</div>
			<div class="row-content">
				<div class="icon" :class="`icon3`"></div>
				<div class="label">产值</div>
				<div class="value">{{ curVillage.amount }}万元</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'CenterMapPopup',
	data() {
		return {};
	},
	props: {
		curVillage: {
			type: Object,
			default: () => {
				return {
					name: '',
					locationX: 0,
					locationY: 0,
					acreage: 0,
					count: 0,
					amount: 0
				};
			}
		},
		showVillageDetail: {
			type: Boolean,
			default: false
		}
	}
};
</script>
<style lang="scss" scoped>
.showVillageDetail {
	position: absolute;
	//  top: 20px;
	// right: 0;
	width: 360px;
	height: 240px;
	border: 1px solid #00ce7d;
	background: linear-gradient(180deg, rgba(0, 206, 125, 0.8) 0%, rgba(9, 26, 35, 0.6) 100%);
	box-shadow: 0px 8px 30px rgba(148, 148, 148, 0.4);
	border-radius: 4px;

	.title {
		padding: 30px;
		height: 30px;
		font-size: 30px;
		font-weight: bold;
		line-height: 30px;
		color: #e0e0e0;
	}
	.content {
		padding: 0 30px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 20px;
		line-height: 34px;
		color: #e0e0e0;
		.row-content {
			padding: 5px 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.icon {
				width: 14px;
				height: 14px;
				border-radius: 50%;
			}
			.icon3 {
				background-color: #0198f3;
			}
			.icon2 {
				background-color: #00ce7d;
			}
			.icon1 {
				background-color: #f7931a;
			}
			.label {
				padding: 0 20px;
			}
			.value {
				flex: 1;
				text-align: right;
			}
		}
	}
}
</style>
